<template>
	<view class="container">
		<uv-loading-page :loading="loading" loading-text="加载中..." font-size="24rpx"></uv-loading-page>
		<view class="title_box">
			<view class="title_text">叶畈水库</view>
			<uni-row class="demo-uni-row">
				<uni-col :span="12"> 
					<view>主坝位移量： <text style="color: #e43d33">-3.1mm</text></view>
				</uni-col>
				<uni-col :span="12"> 
					<view>坝基场压力： <text style="color: #FFF">280mm</text></view>
				</uni-col>
				<uni-col :span="12"> 
					<view>坝基渗流量： <text style="color: #FFF">3m³/d</text></view>
				</uni-col>
				<uni-col :span="24">
					<progress :percent="60" activeColor="#30C8FF" backgroundColor="#9CACF1"  stroke-width="7" />
				</uni-col>
			</uni-row>
		</view>
		<uni-section title="大坝位移量监测" type="line">
			<view class="chart_box" id="echart1"  :loading="loading"></view>
		</uni-section>
		<uni-section title="监测数据" type="line">
			<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center">时间</uni-th>
					<uni-th align="center">X轴位移</uni-th> 
					<uni-th align="center">Y轴位移</uni-th> 
					<uni-th align="center">Z轴位移</uni-th> 
					<uni-th align="center">水平位移</uni-th> 
					<uni-th align="center">和位移</uni-th> 
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center">{{ item.collectTime }}</uni-td>
					<uni-td align="center">
						<view>{{ item.gpsTotalX }}</view>
					</uni-td> 
					<uni-td align="center">
						<view>{{ item.gpsTotalY }}</view>
					</uni-td> 
					<uni-td align="center">
						<view>{{ item.gpsTotalZ }}</view>
					</uni-td> 
					<uni-td align="center">
						<view>{{ item.displacement2d }}</view>
					</uni-td> 
					<uni-td align="center">
						<view>{{ item.displacement3d }}</view>
					</uni-td> 
				</uni-tr>
			</uni-table>
		</uni-section>
	</view>
</template>

<script>
	import CryptoJS from 'crypto-js';
	export default {
		data() {
			return {
				loading: true,
				tableData: [
					{ collectTime: "2024-11-27 23:00:45", gpsTotalX: "-3.3", gpsTotalY: "-4.1", gpsTotalZ: "-0.4", displacement2d: "5.3", displacement3d: "5.3" },
					{ collectTime: "2024-11-27 22:00:47", gpsTotalX: "-3.3", gpsTotalY: "-4.1", gpsTotalZ: "-0.4", displacement2d: "5.3", displacement3d: "5.3" },
					{ collectTime: "2024-11-27 21:00:57", gpsTotalX: "-3.3", gpsTotalY: "-4.2", gpsTotalZ: "-0.5", displacement2d: "5.3", displacement3d: "5.3" },
					{ collectTime: "2024-11-27 20:00:27", gpsTotalX: "-3.2", gpsTotalY: "-4.2", gpsTotalZ: "-0.5", displacement2d: "5.3", displacement3d: "5.3" },
					{ collectTime: "2024-11-27 19:00:35", gpsTotalX: "-3.2", gpsTotalY: "-4.2", gpsTotalZ: "-0.5", displacement2d: "5.3", displacement3d: "5.3" },
					{ collectTime: "2024-11-27 18:00:40", gpsTotalX: "-3.3", gpsTotalY: "-4.1", gpsTotalZ: "-0.5", displacement2d: "5.3", displacement3d: "5.3" },
					{ collectTime: "2024-11-27 17:00:58", gpsTotalX: "-3.3", gpsTotalY: "-4.2", gpsTotalZ: "-0.4", displacement2d: "5.3", displacement3d: "5.4" },
				]
			}
		},
		mounted() {
			// this.initLineChart('echart1', this.tableData);
			this.loginIMS();
		}, 
		methods: {
			loginIMS: function () {
				let _this = this;
				let Authorization = localStorage.getItem("Authorization");
				console.log(Authorization);
				if (typeof (Authorization) != 'undefined' && Authorization != null && Authorization != "") {
					console.log("已经登陆过哩");
					//查询
					_this.getAllHistoricalMonitoringData();
				} else {
					_this.$axios({
						method: "POST",
						url: "/ims/api/manager/login",
						data: {
							username: "SYZC123",
							password: _this.cryptoSHA256("syzc123"),
							// pictureCode:"", //失败三次填写
							// uuid:""
						}
					}).then(res => {
						if (res.data.code == 200) {
							localStorage.setItem("Authorization", JSON.stringify({ Authorization: res.data.data }));
							_this.getAllHistoricalMonitoringData();
						}
						console.log(res);
					}).catch(error => {

					})
				}

			},
			getAllHistoricalMonitoringData: function () {
            	let _this = this; 
				let headers = JSON.parse(localStorage.getItem("Authorization"));
				let startTime = _this.getHalfMonthAgoFormatted();
				let endTime = _this.getCurrentTimeFormatted();
				_this.$axios({
					method: "GET",
					url: "/ims/api/manager/posPlane/allHistoricalMonitoringData",
					params: {
						statsFreq:0,
						startTime,
						endTime,
						sensor: "L1_GP_GMS",
						stationId: 5386,
						// dataType: "",
						projectId: 595,
					},
					headers: headers,
				}).then((res) => {
					// console.log(res.data.data);
					let result = res.data.data;
					_this.tableData = [];
					for (var i = 0; i < result.length; i++) { 
						if(i<50){
							_this.tableData.push({
								collectTime: result[i].collectTime,
								gpsTotalY: result[i]['keyValues'][0]['value'], 
								gpsTotalX: result[i]['keyValues'][1]['value'], 
								gpsTotalZ: result[i]['keyValues'][4]['value'], 
								displacement2d: result[i]['keyValues'][2]['value'], 
								displacement3d: result[i]['keyValues'][3]['value'], 
							});
						}
					}
					_this.initLineChart("echart1",_this.tableData);
					_this.loading = false;
				}).catch(error => {
					console.log(error);
				})
			},
			cryptoSHA256: function (str) {
				const sha1Hash = CryptoJS.SHA256(str);
				return sha1Hash.toString(CryptoJS.enc.Hex);
			},
			initLineChart(id, dataList) {
				let _this = this;
				var chartDom = document.getElementById(id);
				var myChart = _this.$echarts.init(chartDom);
				myChart.clear();
				myChart.resize();
			
				let time = [];
				let dataX = [];
				let dataY = [];
				let dataZ = [];
				let data2d = [];
				let data3d = []; 
				dataList.forEach(element => {  
					time.push(element.collectTime);
					dataX.push(element.gpsTotalX);
					dataY.push(element.gpsTotalY);
					dataZ.push(element.gpsTotalZ);
					data2d.push(element.displacement2d);
					data3d.push(element.displacement3d); 
				}); 
				var option = { 
					grid: {
						top: "15%",
						bottom: "10%",
						left: "10%",
						right: "3%",
						containLabel: false, //true防止标签溢出  false依据坐标轴来对齐的,可能会有内容溢出
					},
					legend: {
						icon: 'stack',	
						itemWidth:10,
						itemHeight:10,
						data: ['X轴位移', 'Y轴位移', 'Z轴位移','水平位移','和位移']
					},
					axisPointer: {
						link: [
							{
								xAxisIndex: 'all'
							}
						]
					}, 
					xAxis: {
						type: 'category', 
						data: time,
						splitLine: {
							show: false
						}
					
					},
					yAxis: [{
						type: 'value',
						// min: -30,
						// max: 30,
						// interval:10
					}],
					dataZoom: [
						{
							type: 'inside',
							start: 0,
							end: 10,
							throttle: 50,
						},
						{
							type: 'slider',
							show: true,
							start: 0,
							end: 10
						}
					],
					series: [{
						name: 'X轴位移',
						type: 'line',
						smooth: true,
						
						showSymbol: false,
					
						tooltip: {
							valueFormatter: function (value) {
								return value + ' mm';
							}
						},
						data: dataX
					},
						{
							name: 'Y轴位移',
							type: 'line',
							smooth: true,
						
							showSymbol: false,
						
							tooltip: {
								valueFormatter: function (value) {
									return value + ' mm';
								}
							},
							data: dataY
						}, {
							name: 'Z轴位移',
							type: 'line',
							smooth: true,
					
							showSymbol: false,
						
							tooltip: {
								valueFormatter: function (value) {
									return value + ' mm';
								}
							},
							data: dataZ
						}, {
							name: '水平位移',
							type: 'line',
							smooth: true,
						
							showSymbol: false,
							
							tooltip: {
								valueFormatter: function (value) {
									return value + ' mm';
								}
							},
							data: data2d
						}, {
							name: '和位移',
							type: 'line',
							smooth: true,
						
							showSymbol: false,
							
							tooltip: {
								valueFormatter: function (value) {
									return value + ' mm';
								}
							},
							data: data3d
						},

					]
				};

				myChart.setOption(option); 
			},
			getCurrentTimeFormatted() {
				const now = new Date();
				const year = now.getFullYear(); // 获取年份
				const month = now.getMonth() + 1; // 获取月份，月份从0开始，所以加1
				const day = now.getDate(); // 获取日期
				const hours = now.getHours(); // 获取小时
				const minutes = now.getMinutes(); // 获取分钟
				const seconds = now.getSeconds(); // 获取秒数

				// 将单个数字格式化为两位数（例如，1 -> 01）
				const formatNumber = (n) => n < 10 ? '0' + n : n;

				// 组合成字符串
				const formattedTime = `${year}-${formatNumber(month)}-${formatNumber(day)} ${formatNumber(hours)}:${formatNumber(minutes)}:${formatNumber(seconds)}`;

				return formattedTime;
			},
			getHalfMonthAgoFormatted() {
				const now = new Date();
				const milliSecondsInDay = 1000 * 60 * 60 * 24;
				const halfMonthInDays = 15; // 半个月大约为15天
				const halfMonthAgo = new Date(now.getTime() - (halfMonthInDays * milliSecondsInDay));

				const year = halfMonthAgo.getFullYear(); // 获取年份
				const month = halfMonthAgo.getMonth() + 1; // 获取月份，月份从0开始，所以加1
				const day = halfMonthAgo.getDate(); // 获取日期
				const hours = 23; // 小时设置为23
				const minutes = 59; // 分钟设置为59
				const seconds = 59; // 秒数设置为59

				// 将单个数字格式化为两位数（例如，1 -> 01）
				const formatNumber = (n) => n < 10 ? '0' + n : n;

				// 组合成字符串
				const formattedTime = `${year}-${formatNumber(month)}-${formatNumber(day)} ${formatNumber(hours)}:${formatNumber(minutes)}:${formatNumber(seconds)}`;

				return formattedTime;
			}
		}
	}
</script>

<style lang="scss">
.container{
	padding: 0.8rem; 
}
.title_box{ 
	background-color: #4768F4;
	box-shadow: 0 0 10px 0 #4768F4;
	border-radius: 0.4rem;
	padding: 0.8rem;
	.title_text{
		color: #fff;
		font-size: 2rem;
		font-weight: bold;
		margin: 1.2rem 0;
	}

	.uni-col {
		margin: 0.2rem 0;
		view{
			color: #d7ddf8;
		}
	}
	.uni-col-24 {
		margin: 0.6rem 0;
	} 
}

.uni-section{
	background: unset !important; 
}
/deep/ .uni-section-header{
	padding-left: 0 !important;
}
.chart_box{
	height: 12rem; 
	width: 100%;
}


</style>
